Badge

Overview of Badges and Tags

The Badge and Tag components in Emvi UI allow you to label, classify, and highlight UI elements in a compact, accessible manner. While they serve similar purposes, their use cases differ:

Badge: Indicates count, status, or notification. Commonly used alongside another component (button, icon, avatar).

Tag: Represents a category, label, or filter. Can be interactive (editable, dismissible) or static.

Both components are designed to natively integrate into responsive interfaces, with support for color variants, icons, sizes, and interactive behaviors.

Indicating Status

Badges are perfect for indicating status updates. Whether it's showing an online/offline status, availability, or any other state, badges provide immediate, at-a-glance information. This helps users quickly understand the status of different elements without needing to click or navigate further, improving the overall user experience.

Highlighting Notifications

Badges are commonly used to highlight notifications or alerts. They often appear with numbers to show unread messages, pending tasks, or new updates. This visual cue ensures users don't miss important information and can promptly address notifications, making their interaction with your site more efficient and responsive.

Marking Events

Badges are also great for marking events or special conditions. They can denote new features, limited-time offers, or any event that requires attention. Placing a badge next to an item can draw users’ focus to it, ensuring they notice and engage with important content. Our UI kit includes versatile badge components that can be customized to fit various needs, enhancing both functionality and aesthetics of your design.

Variants and Types

Emvi UI offers multiple variants for Badge and Tag components, tailored to various use cases and visual hierarchy needs:

Badge:
Numeric Counter: Displays quantities or notifications (e.g., 3, +99), commonly used in buttons or icons.
Status Badge: Indicates statuses like "Active", "New", "Pending" using semantic colors.
Dot Badge: Signals presence or connectivity via a small colored dot.

Tag:
Static Label: Shows categorical text (e.g., Marketing, Beta).
Interactive Tag: Includes a close button or supports multi-selection.
Tag with Icon: Adds contextual icons on the left or right side.

Each variant is available in XS, SM, and MD sizes, with full token-based customization for typography, padding, colors, and border-radius.

Interactive Behavior and States

Badge and Tag components in Emvi UI can be either static or interactive depending on the context. Interactive variants respond to events like hover, focus, click, or dismiss, and are designed to enhance user experience while maintaining accessibility.

Supported States:
Hover / Focus: Background or outline changes to indicate interactivity.
Active / Pressed: Visual feedback when pressed or selected.
Disabled: Dimmed appearance and non-interactive.
Dismissible: Option to remove a Tag via close icon.

Behavior aligns with WCAG standards, and aria-* attributes can be applied to enhance screen reader support.

Design and Development Integration

Badge and Tag components are available as reusable variants in Figma, organized by type, size, color, and state. Each is linked to global typography, color, and spacing styles, enabling controlled customization without losing visual consistency.

In development environments, they're easily implemented using Tailwind classes such as:
inline-flex, items-center, px-2, rounded-full
bg-primary-100 text-primary-700
hover:bg-primary-200 (for interactive variants)

The system also supports icon slots and data-* or aria-* attributes for extended functionality and accessibility.

Best Practices

To maximize the visual and functional effectiveness of Badge and Tag components in Emvi UI, the following guidelines are recommended:

- Use badges only when necessary to highlight status, count, or alerts.
- Avoid tags that are too long or break responsive layouts.
- Don't rely on tags for critical information not reflected elsewhere.
- Maintain semantic color consistency based on their role (status, category, notification).
- Include accessible labels (aria-label) for tags with icons or interactive functionality.

These practices ensure a clear, accessible user experience that aligns with the overall system design.